<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="js/vue.js"></script>
		
		<title>电影列表</title>
		<style type="text/css">
			table,tr,td{
				border:1px solid black;
				border-collapse: collapse;
				border:1px solid green;
			}
			
			table{
				width:100%;
				background-color: antiquewhite;
			}
		
		   .aa{
			background-color:firebrick;
			color: white;
		}
		
		.but{
	
			     background-color: #ff0000; 
			     border: none;
			     color: white;
			     padding: 15px 32px;
			     text-align: center;
			     text-decoration: none;
			     display: inline-block;
			     font-size: 15px;
			     margin: 2px 2px;
			     cursor: pointer;
				 border-radius: 6px;
		}
		.img{
			width: 70px;
			height: 55px;
		}
		</style>
	</head>
	<body>
		<div id="app">
				<!--电影列表 -->
				 <div class="panel panel-primary">
		            <div class="panel-heading">
		                <h3 class="panel-title">电影大全</h3>
		            </div>
		        </div>
		             <!-- 表格 -->
		        <table class="table table-bordered" style='text-align: center'>
		            <thead>
		                <tr class="aa">
		                	<td>选择</td>
							<td>编号</td>
		                    <td>电影图片</td>
							<td>电影名称</td>
		                    <td>单价</td>
		                    <td>数量</td>
		                    <td>总价</td>
		                    <td>删除</td>
		                </tr>
		            </thead>
		            <tbody class='table-striped nth-child table-hover'>
		               
		                <tr v-for='item in goodlist' :key='item.id'>
		                	<td><input type="checkbox" @click='item.selected=!item.selected'></td>
							<td>{{item.ID}}</td>
							<td> <img class="img" src="img/timg.jpg"></td>
		                 	<td>{{item.name}}</td>
		                 	<td>{{item.price}}</td>
							&nbsp;
		                 	<td>
								<button @click='item.num>0?item.num--:0'>-</button>&nbsp;{{item.num}}&nbsp;
							    <button @click='item.num<10?item.num++:10'>+</button>
							</td>
		                 	<td>{{item.price*item.num}}</td>
		                    <td><button class="but" href="javascript:;" class="btn btn-primary" @click="del(item.id)">删除</button></td>
		                </tr>
		                <p>总价:  {{total_price}}  元</p>
		            </tbody>
		        </table>
			</div>
			
			<script>
					var vm=new Vue({
						el:'#app',
						data:{
							goodlist:[
							{'id':1,'ID':1,'name':'美国队长','price':88,'num':1,'selected':false},
							{'id':2,'ID':2,'name':'中国队长','price':66,'num':1,'selected':false},
							{'id':3,'ID':3,'name':'加拿大队长','price':666,'num':1,'selected':false},
							{'id':4,'ID':4,'name':'小日本队长','price':99,'num':1,'selected':false}
							],
							totalPrice:''
						},
						methods:{
							//删除数据
							del(id){
								var index=this.goodlist.some((item,i)=>{
									if(item.id==i){
										return true;
									}
								});
								this.goodlist.splice(index,1);
							}
						},
				
						computed:{
							'total_price':function(){
								this.totalPrice=0;
								//在计算总价的时候，由于必须即时变化价格，需要用到computed监听数据，更重要的是需要遍历每一个选中项，把他们求和
						        for(var i=0;i<this.goodlist.length;i++) {
						          if (this.goodlist[i].selected) {
						            this.totalPrice += this.goodlist[i].price*this.goodlist[i].num;
						          }
						        }
								return this.totalPrice;
							}
						}
					})
	</body>
</html>
